<template>
    <div class="ai-view">
      <!-- AI导诊区域 -->
      <section class="ai-section">
        <div class="ai-container">
          <div class="ai-header">
            <h1 class="ai-title">AI智能导诊</h1>
            <p class="ai-subtitle">描述您的症状，智能推荐就诊科室，为您提供专业就医指导</p>
          </div>
          
          <div class="ai-intro">
            <p>您好！我是您的AI健康助手。请详细描述您当前的症状、不适部位、持续时间及伴随症状，我将为您提供初步的医疗建议和科室推荐。</p>
          </div>
          
          <div class="ai-chat-container">
            <div class="ai-chat-header">
              <div class="ai-avatar">
                <i class="fas fa-robot"></i>
              </div>
              <div>
                <div class="ai-chat-title">AI健康助手</div>
                <div class="ai-chat-status">在线 · 为您服务</div>
              </div>
            </div>
            
            <div class="ai-chat-messages" id="chat-messages">
              <div v-for="(msg, idx) in conversation" :key="idx" :class="['message', msg.role === 'ai' ? 'ai-message' : 'user-message']" v-html="msg.text"></div>
            </div>
            
            <!-- 伴随症状选项 -->
            <div v-if="step === 2 && !showResult" class="options-container">
              <div class="option-btn" v-for="sym in extraSymptoms" :key="sym" @click="selectExtraSymptom(sym)">{{ sym }}</div>
            </div>
            
            <!-- 时段选项 -->
            <div v-if="step === 4 && !showResult" class="options-container">
              <div v-if="timeSlots.length > 0">
                <div class="option-btn" v-for="slot in timeSlots" :key="slot" @click="selectTimeSlot(slot)">{{ slot }}</div>
              </div>
              <div v-else style="color:#f56c6c;padding:8px 0;">当前日期无医生排班，请更换日期</div>
            </div>
            
            <div class="ai-chat-input">
              <input type="text" class="ai-input" v-model="userMessage" placeholder="请描述您的症状..." @keypress="handleKeyPress">
              <button class="ai-send-btn" @click="sendMessage">
                <i class="fas fa-paper-plane"></i>
              </button>
            </div>
          </div>
          
          <div class="result-card" v-if="showResult">
            <div class="result-header">
              <div class="result-icon">
                <i class="fas fa-stethoscope"></i>
              </div>
              <h2 class="result-title">就诊建议</h2>
            </div>
            
            <div class="recommendation-box">
              <h3 class="recommendation-title">推荐科室</h3>
              <div class="department-list">
                <div class="department-card">
                  <div class="department-name">{{ resultDept }}</div>
                  <div class="department-desc">主治与"{{ symptomInfo.main }}"相关的疾病</div>
                  <button class="btn btn-primary" style="padding: 8px 15px;">
                    <i class="fas fa-calendar-check"></i> 预约挂号
                  </button>
                </div>
              </div>
            </div>
            
            <div class="recommendation-box">
              <h3 class="recommendation-title">健康建议</h3>
              <ul style="margin-left: 20px; margin-top: 15px;">
                <li style="margin-bottom: 10px;" v-for="(advice, index) in recommendAdvice(symptomInfo.main, symptomInfo.extra)" :key="index">{{ advice }}</li>
              </ul>
            </div>
            
            <div class="recommendation-box">
              <h3 class="recommendation-title">可预约医生与时段</h3>
              <div v-if="availableDoctors?.length > 0">
                <div v-for="doc in availableDoctors || []" :key="doc?.name" class="doctor-available-card" style="margin-bottom:18px;">
                  <div style="font-weight:600;">{{ doc?.name }}（{{ doc?.title }}，{{ doc?.specialty }}）</div>
                  <div v-for="sch in doc?.available || []" :key="sch.date" style="margin-left:16px; margin-top:4px;">
                    <span style="color:#1976d2;">{{ sch.date }}：</span>
                    <span v-for="slot in sch.slots || []" :key="slot.time" class="slot-tag" style="display:inline-block;background:#e3f2fd;color:#1976d2;border-radius:8px;padding:2px 10px;margin-right:8px;margin-bottom:2px;">{{ slot.time }}</span>
                  </div>
                </div>
              </div>
              <div v-else style="color:#f56c6c;">当前暂无可预约医生，请更换科室或时间</div>
            </div>
            
            <div class="actions">
              <button class="btn btn-primary" @click="resetConsultation">
                <i class="fas fa-sync-alt"></i> 重新咨询
              </button>
            </div>
          </div>
        </div>
      </section>
      
      <!-- 返回顶部按钮 -->
      <div class="floating-btn" @click="scrollToTop">
        <i class="fas fa-arrow-up"></i>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, onMounted, onUnmounted, nextTick, computed } from 'vue';
  
  // 状态管理
  const userMessage = ref('');
  const showResult = ref(false);
  const resultDept = ref('');
  const resultAdvice = ref<string[]>([]);
  const conversation = ref([
    { role: 'ai', text: '您好！我是AI健康助手，请描述您的症状、持续时间及伴随症状。' }
  ]);
  const symptomInfo = ref({ main: '', duration: '', extra: '', date: '', timeSlot: '' });
  const step = ref(0); // 0:症状, 1:持续, 2:伴随, 3:日期, 4:时段, 5:排班判断
  const timeSlots = computed(() => {
    if (step.value !== 4) return [];
    const dept = resultDept.value;
    const dateInput = symptomInfo.value.date;
    if (!dept || !dateInput) return [];
    let dateStr = '';
    const today = new Date();
    if (dateInput.includes('明天')) {
      const d = new Date(today);
      d.setDate(today.getDate() + 1);
      dateStr = d.toISOString().slice(0, 10);
    } else if (dateInput.includes('今天')) {
      dateStr = today.toISOString().slice(0, 10);
    } else if (/\d{1,2}月\d{1,2}日/.test(dateInput)) {
      const match = dateInput.match(/(\d{1,2})月(\d{1,2})日/);
      if (match) {
        const year = today.getFullYear();
        const month = match[1].padStart(2, '0');
        const day = match[2].padStart(2, '0');
        dateStr = `${year}-${month}-${day}`;
      }
    } else if (/^\d{4}-\d{2}-\d{2}$/.test(dateInput)) {
      // 2025-06-12
      dateStr = dateInput;
    } else if (/^\d{1,2}-\d{1,2}$/.test(dateInput)) {
      // 06-12 或 6-12
      const match = dateInput.match(/(\d{1,2})-(\d{1,2})/);
      if (match) {
        const year = today.getFullYear();
        const month = match[1].padStart(2, '0');
        const day = match[2].padStart(2, '0');
        dateStr = `${year}-${month}-${day}`;
      }
    } else {
      dateStr = dateInput;
    }
    const slotsSet = new Set<string>();
    doctorsData.forEach(doc => {
      if (doc.department.includes(dept)) {
        doc.schedules.forEach(sch => {
          if (sch.date === dateStr) {
            sch.slots.forEach(slot => {
              if (!slot.booked) slotsSet.add(slot.time);
            });
          }
        });
      }
    });
    return Array.from(slotsSet);
  });
  const extraSymptoms = ['发热', '咳嗽', '恶心', '呕吐', '腹泻', '乏力', '胸闷', '头晕'];
  
  // 预设的科室数据
  const departments = {
    '头痛': ['神经内科', '普通内科'],
    '发热': ['普通内科', '感染科'],
    '咳嗽': ['呼吸内科', '普通内科'],
    '腹痛': ['消化内科', '普通外科'],
    '胸闷': ['心内科', '呼吸内科'],
    '头晕': ['神经内科', '心内科'],
    '皮疹': ['皮肤科', '过敏反应科'],
    '关节痛': ['风湿免疫科', '骨科']
  };
  
  // 预设的建议数据
  const recommendations = {
    '头痛': [
      '注意休息，保证充足睡眠',
      '保持水分补充，避免脱水',
      '如头痛剧烈或持续加重，建议及时就医',
      '避免过度使用电子产品，注意用眼卫生'
    ],
    '发热': [
      '多喝水，保持充足水分',
      '适当休息，避免劳累',
      '物理降温（温水擦浴）',
      '如体温超过38.5℃，可考虑使用退热药'
    ],
    '咳嗽': [
      '多喝温水，保持喉咙湿润',
      '避免刺激性食物和烟酒',
      '注意室内空气流通和湿度',
      '如咳嗽伴有胸痛或呼吸困难，请及时就医'
    ]
  };
  
  // 1. 引入doctorsData结构（与Appointment.vue一致，可根据实际情况精简/补充）
  const doctorsData = [
    {
      name: '李明',
      title: '主任医师',
      specialty: '心血管内科',
      department: '心血管内科',
      price: 80,
      schedules: [
        { date: '2025-06-12', slots: [ { time: '08:30-09:00', booked: false }, { time: '09:00-09:30', booked: false } ] },
        { date: '2025-06-15', slots: [ { time: '10:00-10:30', booked: false } ] }
      ]
    },
    {
      name: '王芳',
      title: '副主任医师',
      specialty: '呼吸与危重症医学科',
      department: '呼吸与危重症医学科',
      price: 50,
      schedules: [
        { date: '2025-06-10', slots: [ { time: '08:30-09:00', booked: false }, { time: '09:00-09:30', booked: true } ] },
        { date: '2025-06-11', slots: [ { time: '10:00-10:30', booked: false } ] }
      ]
    },
    {
      name: '张伟',
      title: '主治医师',
      specialty: '骨科',
      department: '骨科（四川省重点专科）',
      price: 30,
      schedules: [
        { date: '2025-06-11', slots: [ { time: '08:30-09:00', booked: false }, { time: '09:00-09:30', booked: false } ] }
      ]
    },
    {
      name: '李娜',
      title: '副主任医师',
      specialty: '普通外科',
      department: '普通外科（胃肠/肝胆）',
      price: 50,
      schedules: [
        { date: '2025-06-13', slots: [ { time: '08:30-09:00', booked: false } ] }
      ]
    },
    {
      name: '赵强',
      title: '主任医师',
      specialty: '妇科',
      department: '妇科',
      price: 80,
      schedules: [
        { date: '2025-06-12', slots: [ { time: '08:30-09:00', booked: false } ] }
      ]
    },
    {
      name: '钱丽',
      title: '主治医师',
      specialty: '儿童内科',
      department: '儿童内科',
      price: 30,
      schedules: [
        { date: '2025-06-12', slots: [ { time: '08:30-09:00', booked: false } ] }
      ]
    },
    {
      name: '孙健',
      title: '副主任医师',
      specialty: '康复医学科',
      department: '康复医学科（含高压氧）',
      price: 50,
      schedules: [
        { date: '2025-06-13', slots: [ { time: '08:30-09:00', booked: false } ] }
      ]
    },
    {
      name: '周敏',
      title: '主治医师',
      specialty: '放射科',
      department: '放射科（含CT/MRI）',
      price: 30,
      schedules: [
        { date: '2025-06-14', slots: [ { time: '08:30-09:00', booked: false } ] }
      ]
    }
  ];
  
  // 2. 新增获取推荐科室下未来7天所有可预约医生及时段的方法
  function getAvailableDoctorsAndSlots(deptName: string): any[] {
    const today = new Date();
    const next7: string[] = [];
    for (let i = 0; i < 7; i++) {
      const d = new Date(today);
      d.setDate(today.getDate() + i);
      next7.push(d.toISOString().slice(0, 10)); // '2025-06-12'
    }
    return doctorsData.filter(doc => doc.department.includes(deptName)).map(doc => {
      const available = doc.schedules
        .filter(sch => next7.includes(sch.date))
        .map(sch => ({
          date: sch.date,
          slots: sch.slots.filter(slot => !slot.booked)
        }))
        .filter(sch => sch.slots.length > 0);
      return available.length > 0 ? { ...doc, available } : null;
    }).filter((item): item is any => !!item);
  }
  
  // 4. 计算availableDoctors
  const availableDoctors = computed(() => getAvailableDoctorsAndSlots(resultDept.value));
  
  // 发送消息
  const sendMessage = () => {
    const message = userMessage.value.trim();
    if (!message) return;
    conversation.value.push({ role: 'user', text: message });
    userMessage.value = '';
    nextTick(scrollToBottom);
    setTimeout(() => aiReply(message), 800);
  };
  
  // AI回复
  const aiReply = (message: string) => {
    if (step.value === 0) {
      symptomInfo.value.main = message;
      resultDept.value = recommendDept(message, symptomInfo.value.extra);
      conversation.value.push({ role: 'ai', text: '请问该症状持续了多久？' });
      step.value++;
      nextTick(scrollToBottom);
      return;
    }
    if (step.value === 1) {
      symptomInfo.value.duration = message;
      conversation.value.push({ role: 'ai', text: '是否有其他伴随症状？（如发热、咳嗽、恶心等）' });
      step.value++;
      nextTick(scrollToBottom);
      return;
    }
    if (step.value === 2) {
      symptomInfo.value.extra = message;
      conversation.value.push({ role: 'ai', text: '您近期方便来医院就诊吗？请填写期望的预约日期（如：6月15日、明天等）' });
      step.value++;
      nextTick(scrollToBottom);
      return;
    }
    if (step.value === 3) {
      symptomInfo.value.date = message;
      conversation.value.push({ role: 'ai', text: '请填写期望的具体时段（如：9:00-9:30、10:00-10:30等）' });
      step.value++;
      nextTick(scrollToBottom);
      return;
    }
    if (step.value === 4) {
      symptomInfo.value.timeSlot = message;
      // 模拟排班判断
      const hasDoctor = checkDoctorAvailable(symptomInfo.value.main, symptomInfo.value.date, symptomInfo.value.timeSlot);
      if (hasDoctor) {
        conversation.value.push({ role: 'ai', text: `该时间段有医生可预约，建议您尽快预约挂号。` });
        showResult.value = true;
      } else {
        conversation.value.push({ role: 'ai', text: `很抱歉，${symptomInfo.value.date} ${symptomInfo.value.timeSlot} 暂无医生排班。您是否愿意更换日期或时段？或者建议您前往其他医院就诊。` });
        // step不自增，等待用户输入新日期或时段
        step.value = 3;
      }
      nextTick(scrollToBottom);
      return;
    }
    // 继续追问或重置
    conversation.value.push({ role: 'ai', text: '如需继续咨询，请输入新的症状。' });
    step.value = 0;
    symptomInfo.value = { main: '', duration: '', extra: '', date: '', timeSlot: '' };
    showResult.value = false;
    nextTick(scrollToBottom);
  };
  
  // 推荐科室
  function recommendDept(main: string, extra: string) {
    if (main.includes('头痛')) return '神经内科';
    if (main.includes('咳嗽')) return '呼吸内科';
    if (main.includes('腹痛')) return '消化内科';
    if (main.includes('发热')) return '感染科';
    if (main.includes('胸闷')) return '心内科';
    if (main.includes('头晕')) return '神经内科';
    if (main.includes('皮疹')) return '皮肤科';
    if (main.includes('关节痛')) return '风湿免疫科';
    return '普通内科';
  }
  
  // 推荐建议
  function recommendAdvice(main: string, extra: string) {
    if (main.includes('头痛')) return ['注意休息，避免用脑过度。','保持水分补充，避免脱水。','如头痛剧烈或持续加重，建议及时就医。'];
    if (main.includes('咳嗽')) return ['多喝水，注意保暖。','避免刺激性食物和烟酒。','如咳嗽伴有胸痛或呼吸困难，请及时就医。'];
    if (main.includes('腹痛')) return ['饮食清淡，避免油腻辛辣。','注意腹部保暖。','如腹痛剧烈或伴有呕吐、发热，请及时就医。'];
    if (main.includes('发热')) return ['多喝水，适当休息。','物理降温（温水擦浴）。','如体温超过38.5℃，可考虑使用退热药。'];
    if (main.includes('胸闷')) return ['避免剧烈运动，注意休息。','如伴有胸痛、呼吸困难，请及时就医。'];
    if (main.includes('头晕')) return ['避免突然起身，注意安全。','如头晕持续或伴有其他症状，请及时就医。'];
    if (main.includes('皮疹')) return ['保持皮肤清洁干燥。','避免搔抓。','如皮疹范围扩大或伴有发热，请及时就医。'];
    if (main.includes('关节痛')) return ['注意关节保暖，避免劳损。','如关节红肿热痛明显，请及时就医。'];
    return ['建议多休息，保持良好作息。','如症状持续或加重，请及时就医。'];
  }
  
  // 重新咨询
  const resetConsultation = () => {
    conversation.value = [
      { role: 'ai', text: '您好！我是AI健康助手，请描述您的症状、持续时间及伴随症状。' }
    ];
    symptomInfo.value = { main: '', duration: '', extra: '', date: '', timeSlot: '' };
    showResult.value = false;
    resultDept.value = '';
    resultAdvice.value = [];
    step.value = 0;
    nextTick(scrollToBottom);
  };
  
  // 滚动到底部
  const scrollToBottom = () => {
    const chatMessages = document.getElementById('chat-messages');
    if (chatMessages) {
      chatMessages.scrollTop = chatMessages.scrollHeight;
    }
  };
  
  // 返回顶部
  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  };
  
  // 按Enter发送消息
  const handleKeyPress = (event: KeyboardEvent) => {
    if (event.key === 'Enter') sendMessage();
  };
  
  // 生命周期钩子
  onMounted(() => {
    nextTick(scrollToBottom);
  });
  
  onUnmounted(() => {});
  
  function checkDoctorAvailable(main: string, date: string, timeSlot: string) {
    // 示例：假设"明天 9:00-9:30"有医生，其余没有
    if ((date.includes('明天') || date.includes('6月15')) && timeSlot === '9:00-9:30') return true;
    return false;
  }
  
  function selectExtraSymptom(sym: string) {
    userMessage.value = sym;
    sendMessage();
  }
  
  function selectTimeSlot(slot: string) {
    userMessage.value = slot;
    sendMessage();
  }
  </script>
  
  <style lang="scss">
  // AI导诊区域
  .ai-section {
    padding: 45px 8% 60px;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .ai-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }
  
  .ai-header {
    text-align: center;
    margin-bottom: 0px;
  }
  
  .ai-title {
    font-family: 'Poppins', sans-serif;
    font-size: 2.5rem;
    color: var(--primary-blue);
    margin-bottom: 15px;
  }
  
  .ai-subtitle {
    font-size: 1.1rem;
    color: var(--text-medium);
    max-width: 700px;
    margin: 0 auto;
  }
  
  .ai-intro {
    text-align: center;
    margin-bottom: 30px;
  }
  
  // 聊天界面
  .ai-chat-container {
    background: white;
    border-radius: 20px;
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 600px;
  }
  
  .ai-chat-header {
    background: var(--primary-blue);
    color: white;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
  }
  
  .ai-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--accent-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
  }
  
  .ai-chat-title {
    font-size: 1.5rem;
    font-weight: 600;
  }
  
  .ai-chat-status {
    font-size: 0.9rem;
    opacity: 0.8;
  }
  
  .ai-chat-messages {
    flex: 1;
    padding: 25px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .message {
    max-width: 80%;
    padding: 15px 20px;
    border-radius: 18px;
    position: relative;
    animation: fadeIn 0.3s ease-out;
  }
  
  .ai-message {
    background: var(--light-blue);
    border-bottom-left-radius: 5px;
    align-self: flex-start;
  }
  
  .user-message {
    background: var(--primary-blue);
    color: white;
    border-bottom-right-radius: 5px;
    align-self: flex-end;
  }
  
  .options-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px auto 0 auto;
    justify-content: center;
    max-width: 90%;
  }
  
  .option-btn {
    padding: 6px 18px;
    background: #f5f7fa;
    border: 1.5px solid var(--primary-blue);
    color: var(--primary-blue);
    border-radius: 18px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.18s;
    margin-bottom: 4px;
    font-weight: 500;
    box-shadow: 0 1px 4px rgba(25,118,210,0.06);
    outline: none;
  }
  
  .option-btn:hover, .option-btn.selected {
    background: var(--primary-blue);
    color: #fff;
    border-color: var(--primary-blue);
    box-shadow: 0 2px 8px rgba(25,118,210,0.13);
  }
  
  /* 只在step为2或4且showResult为false时显示按钮 */
  .options-container {
    display: flex;
  }
  .options-container[hidden] {
    display: none !important;
  }
  
  .ai-chat-input {
    display: flex;
    padding: 20px;
    background: var(--light-gray);
    border-top: 1px solid var(--medium-gray);
  }
  
  .ai-input {
    flex: 1;
    padding: 12px 20px;
    border-radius: 30px;
    border: 1px solid var(--medium-gray);
    font-size: 1rem;
    outline: none;
    transition: var(--transition);
  }
  
  .ai-input:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
  }
  
  .ai-send-btn {
    margin-left: 15px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--primary-blue);
    color: white;
    border: none;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
  }
  
  .ai-send-btn:hover {
    background: var(--dark-blue);
    transform: scale(1.05);
  }
  
  // 结果卡片
  .result-card {
    background: white;
    border-radius: 20px;
    padding: 30px;
    box-shadow: var(--shadow);
    margin-top: 40px;
  }
  
  .result-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--medium-gray);
  }
  
  .result-icon {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    background: var(--gradient-blue);
    color: white;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .result-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.8rem;
    color: var(--primary-blue);
  }
  
  .recommendation-box {
    background: var(--light-blue);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 25px;
  }
  
  .recommendation-title {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: var(--text-dark);
    font-weight: 600;
  }
  
  .department-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 20px 0;
  }
  
  .department-card {
    flex: 1;
    min-width: 200px;
    background: white;
    border-radius: 15px;
    padding: 20px;
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--accent-teal);
    transition: var(--transition);
  }
  
  .department-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
  }
  
  .department-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 10px;
  }
  
  .department-desc {
    font-size: 0.9rem;
    color: var(--text-medium);
    margin-bottom: 15px;
  }
  
  .actions {
    display: flex;
    gap: 15px;
    margin-top: 30px;
  }
  
  // 返回顶部按钮
  .floating-btn {
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--primary-blue);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 10px 25px rgba(13, 110, 253, 0.5);
    cursor: pointer;
    transition: var(--transition);
    z-index: 1000;
    display: none;
  }
  
  .floating-btn:hover {
    transform: scale(1.1);
    background: var(--dark-blue);
  }
  
  // 动画效果
  @keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  // 响应式设计
  @media (max-width: 768px) {
    .ai-title {
      font-size: 2rem;
    }
    
    .ai-chat-container {
      height: 500px;
    }
    
    .department-list {
      flex-direction: column;
    }
    
    .message {
      max-width: 95%;
    }
  }
  </style>